<template>
	<view style="background-color: #f8f8f8;min-height:100vh">
		<view class="empty-border" style="height:10px">

		</view>
		<view class="distraction" style="margin:10px">
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="abu_baoming,abu_activity"
				ref="udb" :where="where">
				<view v-if="error">{{error.message}}</view>
				<view v-else-if="loading">正在加载...</view>
				<view v-else>
					<!-- {{data}} -->

					<view v-if="data" class="content">
						<uni-list>
							<uni-list-item style="margin:10px" v-for="(item,index) in data"
								v-if="item&&item.ActivityName[0]&&item.ActivityName[0].Status == 1" direction="column">
								<template v-slot:header>
									<view class="slot-box" style="display: flex;flex-direction: column;">
										<view class="main_title" style="font-size: 20px;font-weight: 700;">
											{{item.ActivityName[0].ActivityName}}
										</view>
										<view class="sub_title" style="font-size: 14px;font-weight: 100;">
											简介：{{item.ActivityName[0].ActivityDescription}}
										</view>
										<view class="sub_title" style="font-size: 14px;font-weight: 100;">
											活动地点：{{item.ActivityName[0].ActivityLocation}}
										</view>
									</view>
								</template>
								<template v-slot:body>
									<view class="slot-box"
										style="display: flex;flex-direction: column;font-size: 14px;font-weight: 100;">
										<view class="main_title">
											开始时间：{{formatTimestamp(item.ActivityName[0].ActivityDateTime_start)}}
										</view>
										<view class="sub_title">
											结束时间：：{{formatTimestamp(item.ActivityName[0].ActivityDateTime_end)}}
										</view>
									</view>
								</template>
								<template v-slot:footer>
									<view class="footer-hr"
										style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
										<view class="left_text">
											{{item.RegistrationStatus == 1?'审核中':'已参加'}}
										</view>
										<view class="left_btn">
											<button @click="baoming(item)">取消报名</button>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</view>

					<view v-else class="empty-border">
						没有报名的活动
					</view>
				</view>
			</unicloud-db>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				where: {}
			}
		},
		onLoad() {
			const user_info = uniCloud.getCurrentUserInfo()
			this.where = {
				user_id: user_info.uid
			}
		},
		methods: {
			baoming(item) {
				this.$refs.udb.remove(item._id)
			},
			formatTimestamp(timestamp) {
				// 创建 Date 对象并传入时间戳（单位：毫秒）
				const date = new Date(timestamp);

				// 获取年、月、日
				const year = date.getFullYear();
				// 月份是从 0 开始计数，所以要加 1
				const month = date.getMonth() + 1;
				const day = date.getDate();

				// 使用模板字符串拼接年月日
				const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;

				return formattedDate;
			}
		}
	}
</script>

<style>

</style>